<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script src="./lib/echarts.min.js"></script>
  <div id="main" style="width: 600px;height:400px;"></div>
  <script>
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));

// 指定图表的配置项和数据
var option = {
  title: {
    text: '主标题',
    subtext:'副标题',
    textStyle:{
      color:'red'
    },
    subtextStyle:{
      color:'green'
    }
  },
  tooltip: {},
  legend: {
    data: ['销量','回购量']
  },
  xAxis: {
    data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'],
    axisLine:{
      show : true,
      lineStyle:{
        width:4,  
        type:'dashed'
      }
    }
  },
  yAxis: {
    axisLine:{
      show : true,
      lineStyle:{
        width:4,  
        type:'dashed'
      }
    }
  },
  series: [
    {
      name: '销量',
      type: 'line',
      data: [5, 15, 36, 17, 10, 20],
      lineStyle:{
        color:'pink',
        width:5
      },
      areaStyle:{
        color:'purple',
      }
    },

    // {
    //   name: '回购量',
    //   type: 'bar',
    //   data: [5, 6, 6, 3, 5, 8]
    // }
  ],
  grid:{
    left:'10%',
    // backgroundColor:'#ccc',
    // show:true
  },
  color:['#666','green',]
};

// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
  </script>
</body>
</html>